<template>
    <div>
        <div class="flex" style="margin-bottom: 1.5%">
            <a-tooltip content="请输入车号">
                <a-input v-model="objectData.car_no" placeholder="请输入车号" allow-clear style="width:calc((100% - 64px) / 6);margin-right:16px;" />
            </a-tooltip>
            <a-tooltip content="请输入箱号">
                <a-input v-model="objectData.box" placeholder="请输入箱号" allow-clear style="width:calc((100% - 64px) / 6);margin-right:16px;" />
            </a-tooltip>
            <a-tooltip content="请选择客户">
                <a-select v-model="objectData.dept_id" :options="dept_list" :filter-option="filterOption" :field-names="fieldNamedept"  allow-clear allow-search placeholder="请选择客户" style="width:calc((100% - 64px) / 6);margin-right:16px;" />
            </a-tooltip>
            <a-tooltip content="请选择品名">
                <a-select v-model="objectData.goods_id" :options="goods_list" :filter-option="filterOption" :field-names="fieldNamedept"  allow-clear allow-search placeholder="请选择品名" style="width:calc((100% - 64px) / 6);margin-right:16px;" />
            </a-tooltip>
            <div class="flex" style="width:calc((100% - 64px) / 6);">
                <a-button type="primary" style="margin-right:16px;" @click="handleSouSuo(1)">搜索</a-button>
                <a-button @click="handleChongZhi(1)">重置</a-button>
            </div>
        </div>
        <div class="flex" style="margin-bottom: 1.5%">
            
            <a-tooltip content="请选择发运时间">
                <a-date-picker
                    style="width:calc((100% - 64px) / 6);margin-right:16px;"
                    v-model="send_time"
                    format="YYYY-MM-DD"
                    @ok="onshezhiOk($event)"
                />
            </a-tooltip>
            <div class="flex" style="width:calc((100% - 64px) / 6);">
                <a-button type="primary" style="margin-right:16px;" @click="handleShezhi">批量设置</a-button>
            </div>
        </div>
        <a-table :scroll="{x:'100%'}" :data="chongGouList" :columns="columns" :pagination="false" row-key='id' ref="aTableRef" @row-click="rowClick" :row-selection="{type: 'checkbox',showCheckedAll: true,onlyCurrent: false,}"  v-model:selectedKeys="keys" @selection-change="setSelectedKeys">
            <template #dept_id="{ record,rowIndex }">
                <div v-if="record.dept">{{ record.dept.name }}</div>
                <div style="color:red;" v-if="!record.dept && record.is_nobody == 1">无主货</div>
            </template>
            <template #goods_id="{ record,rowIndex }">
                {{ record.goods_name }}
            </template>
            <template #car_no="{ record }">
                <div class="flex align_center justify_center">
                    <div style="color:red">{{ record.car_type }}</div>
                    <div style="">-</div>
                    <div>{{record.car_no}}</div>
                </div>
            </template>
            <template #send_time="{record,rowIndex}" >
                <div @click.stop>
                <a-date-picker
                    style="width: 100%; "
                    v-model="record.send_time"
                    format="YYYY-MM-DD"
                    @ok="onOk($event,rowIndex)"
                />
                </div>
            </template>
            <template #notice_time="{record,rowIndex}">
                <div @click.stop>
                <a-date-picker
                    style="width: 100%; "
                    show-time
                    v-model="record.notice_time"
                    format="YYYY-MM-DD HH:mm"
                    @ok="onOks($event,rowIndex)"
                />
                </div>
            </template>
            
            <template #work_line="{ record }">
                <div @click.stop>
                    <input v-model="record.work_line" placeholder="股道" type="text" class="input" style="width: 100%;" />
                </div>
                
            </template>
            <template #transport_number="{ record }">
                <div @click.stop>
                    <input v-model="record.transport_number" placeholder="顺位" type="text" class="input" style="width: 100%;" />
                </div>
            </template>
            <template #transport_type="{record,rowIndex}">
                {{ record.transport_type == 1?'集装箱':record.transport_type == 2?'整车':'批量快运' }}
            </template>
            <template #serve_type="{record,rowIndex}">
                {{record.serve_type == 1?'仓储':record.serve_type == 2?'配送':'自提'}}
            </template>
            <!-- <template #caozuo="{record,rowIndex}">
                <div @click.stop>
                    <a-link @click="handleTongshang(record,rowIndex)" v-if="rowIndex != 0">同上</a-link>
                </div>
            </template> -->
            <!-- <template #ec_id="{record,rowIndex}">
                <div @click.stop>
                    <a-link @click="openFile(record.ec_id)">查看大票</a-link>
                </div>
            </template> -->
            
        </a-table>
        <div class="flex" style="justify-content: flex-end;margin-top: 1.5%;">
            <a-pagination :total="chongGouTotal" @change="handleChange" @page-size-change="handlePageSizeChange"  show-page-size show-total/>
        </div>
        <div class="flex" style="justify-content: flex-end;margin-top: 1.5%;" >
            <a-button type="primary" @click="handleQuePipei">确认发货</a-button>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, onActivated, defineProps } from "vue";
import predictionManage from "@/api/prediction/predictionManage";
import commonApi from "@/api/common";
import { request } from "@/utils/request.js";
import { Message } from "@arco-design/web-vue";
import tool from '@/utils/tool'
import { options } from "less";
import { pinyin } from "pinyin-pro"
const filterOption = (v,option)=>{
    return option.keywords.some(keywords=>keywords.includes(v))
}
const fieldNamedept = {value: 'id', label: 'name'}
const send_time = ref(tool.dateFormat(
			Math.round(new Date().getTime() / 1000).toString(),
			"yyyy-MM-dd"
		))
const aTableRef = ref(null)
const rowClick = (e) => {
    console.log(e)
    if(keys.value.includes(e.id)){
        aTableRef.value.select(e.id,false)
    }else{
        aTableRef.value.select(e.id,true)
    }
}

const emits = defineEmits(['succ'])
const keys = ref([])
const dept_list = ref([])   //  公司列表
const contract_list = ref([])  // 合同列表
const goods_list = ref([])  // 品名列表
const objectData = ref({
    page:1,
    pageSize:10,
    car_no:'',
    is_tihuo:1,
    goods_id:"",
    box:"",
    prediciont_status:0,
    dept_id:'',
    type:2
})
const chongGouTotal = ref(0) 
const yunshuList = ref([])
const fuwuList = ref([])
const chongGouList = ref([]) 
const handleTongshang = (row,index)=>{
    if(index > 0){
        chongGouList.value[index].come_time = chongGouList.value[index - 1].come_time
        chongGouList.value[index].notice_time = chongGouList.value[index - 1].notice_time
        chongGouList.value[index].work_line = chongGouList.value[index - 1].work_line
        chongGouList.value[index].transport_number = chongGouList.value[index - 1].transport_number
    }else{
        Message.error('同上失败！')
    }
    console.log(chongGouList.value)
}
const handleSouSuo = ()=>{
    objectData.value.page = 1  
    handleChongGouList()
}
const handleChongZhi = ()=>{
    objectData.value.page = 1
    objectData.value.car_no = ''
    objectData.value.dept_id = ''
    handleChongGouList()
}
const handleShezhi = ()=>{
        if(keys.value.length == 0){
        	return Message.error('请选择数据~')
        }
        chongGouList.value.map((v,i)=>{
            if(keys.value.includes(v.id)){
                v.send_time = send_time.value
            }
        })	
    }
const onOk = (e,index)=>{
    chongGouList.value[index].send_time = e
}
const onOks = (e,index)=>{
    chongGouList.value[index].notice_time = e
}

const handleQuePipei = ()=>{
    if(keys.value.length != 0){
        let arr = []
        keys.value.map((v,i)=>{
            chongGouList.value.map((vv,ii)=>{
                if(v == vv.id){
                    arr.push(vv)
                }
            })
        })
        
        predictionManage.confimSend({item:arr}).then(res=>{
            handleChongGouList()
            Message.success('发货成功！')
            // emits('succ',false)
        })
    }else{
        Message.error('请选择数据~')
    }
}
const onshezhiOk = (e) =>{
        send_time.value = e
    }
const handleDeptList = () => {   //  获取公司列表
    request({
        url: 'system/dept/remote',
        method: 'post',
        data: {
        openPage: false,
        remoteOption: {
            filter: {
            type: ['=', 2],
            status: ['=',1]
            },
            select: ["id", "name"],
            sort: { id: "desc" }
        }
        }
    }).then(res => {
        res.data.map((v,i)=>{
            v.keywords = [
                v.name,
                pinyin(v.name,{toneType:'none',pattern:'first'}).split(' ').join(''),
                pinyin(v.name,{toneType:'none',pattern:'first'}).split(' ').join('').toUpperCase()
            ]
        })
        dept_list.value = res.data
    })
}

const hadnleChangeGoods = () => {   // 品名列表
    request({
      url: 'goods/manage/index',
      method: 'get',
      params:{
          pageSize:1000,
      }
  }).then(res => {
      let _data = res.data.items
      _data.map((v,i)=>{
          v.goods_id = v.id
      })
      _data.map((v,i)=>{
        v.keywords = [
          v.name,
          pinyin(v.name,{toneType:'none',pattern:'first'}).split(' ').join(''),
          pinyin(v.name,{toneType:'none',pattern:'first'}).split(' ').join('').toUpperCase()
        ]
      })
      goods_list.value = _data
  })
}
const hadnleGoods = (e,index) => {   // 选择品名
    chongGouList.value[index].goods_id = e
}
const hadnleChangetransport_type = (e,index) => {   // 选择运输方式
    chongGouList.value[index].transport_type = e
}
const hadnleChangeserve_type = (e,index) => {   // 选择是否仓储
    chongGouList.value[index].serve_type = e
}
const handleChange = (e)=>{
    objectData.value.page = e
    handleChongGouList()
}
const handlePageSizeChange = (e)=>{
    objectData.value.page = 1
    objectData.value.pageSize = e
    handleChongGouList()	
}
const setSelectedKeys = (ids)=>{
    keys.value = ids
}

const handleChongGouList = () => {
    predictionManage.getList(objectData.value).then(res => {
        if (res.code == 200) {
            let _data = res.data.items
            _data.map((v, i) => {
                if (v.load_detail == null) {   // 未生成装卸任务
                    v.load = 3
                } else if (v.load_detail.detail_load_status == 0) { // 已生成装卸任务
                    v.load = 2
                } else if (v.load_detail.detail_load_status == 1) { // 已生成装卸任务
                    v.load = 1
                }
                v.weight = (v.weight - 0).toFixed(3);
                v.weight_yu = (v.weight_yu - 0).toFixed(3);
                v.yb_weight = (v.yb_weight - 0).toFixed(3);
                v.goods_ids = v.goods_id
                v.send_time = tool.dateFormat(
        Math.round(new Date().getTime() / 1000).toString(),
        "yyyy-MM-dd"
    ),
                v.notice_time = tool.dateFormat(
        Math.round(new Date().getTime() / 1000).toString(),
        "yyyy-MM-dd hh:mm:ss"
    ),
                v.transport_type = v.transport_type + ''
                v.serve_type = v.serve_type + ''
                v.dept_id = v.dept_id == 0? '' : v.dept_id
                v.goods_id = v.goods_id == 0? '' : v.goods_id
                v.contract_id = v.contract_id == 0? '' : v.contract_id
            });
            console.log('_data:',_data)
            chongGouList.value = _data
            chongGouTotal.value = res.data.pageInfo.total
        }
    })
}
const columns = reactive([
    
    {
        title: "车号",
        dataIndex: "car_no",
        align: "center",
        formType: "input",
        width: 180,
        slotName:'car_no'
    },
    {
        title: "发运时间",
        dataIndex: "send_time",
        align: "center",
        formType: "input",
        width: 180,
        slotName:'send_time'
    },
    
    {
        title: "箱号",
        dataIndex: "box",
        formType: "input",
        align: "center",
        width: 160,
        slotName:'box'
    },
    {
        title: "原票号",
        dataIndex: "ticket_number",
        align: "center",
        formType: "input",
        width: 160,
    },
    {
        title: "客户",
        dataIndex: "dept_id",
        align: "center",
        width: 200,
        slotName:'dept_id'
    },
    {
        title: "品名",
        dataIndex: "goods_id",
        align: "center",
        slotName:'goods_id',
        width: 180,
    },
]);

onMounted(()=>{
    keys.value = []
    handleChongGouList()
    handleDeptList()
    hadnleChangeGoods()
    commonApi.getDict("transport_type").then((res) => {
        yunshuList.value = res.data;
    });
    commonApi.getDict("serve_type").then((res) => {
        fuwuList.value = res.data;
    });
})
</script>

<style lang="less" scoped>
.input {
	width: 60px;
	padding: 4px 12px;
	background: #fff;
	border: 1px solid rgba(242, 243, 245);
	border-radius: 4px;
	outline: none;
	/*清除input点击之后的黑色边框*/
}

.input:focus {
	background: #fff;
	border: 1px solid #1e80ff;
}
</style>
<script>
    export default { name: "send:sendhuo" };
</script>